<template>
  <div id="productDetails">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="top">
        <!-- <a href="javascript:;">
          <img src="@/assets/img/new/logo@2x.png" alt />
          <i>USDT {{$t('m.plan')}}</i>
        </a>-->
        <span>{{$t('m.activationCode')}}：</span>
        <div>
          <input type="text" v-model="code" />
        </div>
      </div>
      <!-- <div class="xian"></div> -->
      <div class="content">
        <!-- <div>
          <h2>{{$t('m.reservation')}}{{$t('m.amount')}}</h2>
          <p>
            <i>{{wdyFinancial.usdtAmount}} USDT</i>
          </p>
          <span>{{$t('m.tips15_21')}}</span>
        </div>-->
        <div class="tips">
          <p class="title">{{$t('m.lctips')}}</p>
          <p>{{$t('m.lctips1')}}{{product.cnnAmount}},{{$t('m.lctips1_1')}}{{product.vcAmount}} VC;</p>
          <p>{{$t('m.lctips2')}}{{product.releaseVcAmount}} VC;</p>
          <p>{{$t('m.lctips3')}}</p>
          <p>{{$t('m.lctips4')}}</p>
        </div>
        <div class="sub">
          <a href="javascript:;" @click="sub">{{$t('m.confirm')}}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      userObj: {},
      wdyFinancial: {},
      code: "",
      product: ""
    };
  },
  created() {
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    // 理财信息
    Services.getProduct({
      id: 1
    }).then(res => {
      if (res.code == "0000") {
        this.product = res.product;
      } else {
        Toast(res.msg);
      }
    });
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
      if (res.code == "0000") {
        this.userObj = res.user;
        localStorage.setItem("userObj", JSON.stringify(this.userObj));
      } else {
        Toast(res.msg);
        localStorage.removeItem("token");
        localStorage.removeItem("userObj");
        sessionStorage.setItem("loginBack", true);
        this.$router.push(`/login`);
      }
    });
    let category = 0;
    if (localStorage.getItem("language") == "en_US") {
      category = 1;
    } else {
      category = 0;
    }
    // Services.financialEdit(this.loginToken,{
    //   productId: this.$route.query.id,
    //   category:category,
    //   lang: localStorage.getItem("language")
    // }).then(res => {
    //   if (res.code == "0000") {
    //     this.wdyFinancial = res.wdyFinancial;
    //   }
    // });
    this.changeTitle(this.$t("m.reservation"));
  },
  components: { Header },
  computed: {},
  mounted() {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    sub() {
      Services.getTransactions({
        token: this.loginToken,
        activeCode: this.code,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          Toast(this.$t("m.successfulReservation"));
          this.$router.push(`/home`);
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#productDetails {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  //   background: #434551;
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow-y: scroll;
    .top {
      padding: 0.5rem;
      //   background: #434551;
      display: flex;
      align-items: center;
      > div {
        flex: 1;
        background: linear-gradient(to right, #f8f8f8, #d3d3d5);
        border-radius: 0.2rem;
        height: 0.75rem;
        display: flex;
        align-items: center;
        padding: 0 0.5rem;
        position: relative;
        overflow: hidden;
        input {
          flex: 1;
          border: none;
          outline: none;
          height: 100%;
          background: transparent;
          padding: 0 0.2rem;
          color: #40404c;
          font-size: 0.26rem;
          &::-webkit-input-placeholder {
            color: #999;
          }
        }
      }

      //   a {
      //     background: #2d2f3b;
      //     display: flex;
      //     height: 0.8rem;
      //     width: 100%;
      //     padding: 0 0.3rem;
      //     color: #fff;
      //     align-items: center;
      //     img {
      //       width: 0.5rem;
      //       margin-right: 0.1rem;
      //       height: 0.5rem;
      //     }
      //   }
    }
    .content {
      color: #40404c;
      //   background: #434551;
      //   min-height: calc(100% - 1.4rem);
      padding: 0.2rem 0.3rem 0;
      .tips {
        font-size: 0.26rem;
        margin-bottom: 0.1rem;
        .title {
          margin-bottom: 0.2rem;
          font-size: 0.3rem;
        }
      }
      div {
        //     margin-bottom: 0.1rem;
        //     h2 {
        //       font-size: 0.36rem;
        //       color: #c0c1c4;
        //       margin-bottom: 0.2rem;
        //       padding: 0 0.3rem;
        //     }
        //     p {
        //       display: flex;
        //       align-items: center;
        //       font-size: 0.32rem;
        //       font-weight: 700;
        //       padding: 0 0 0.2rem 0.5rem;
        //       border-bottom: 0.01rem solid #ccc;
        //       img {
        //         width: 0.5rem;
        //         margin-right: 0.2rem;
        //         height: 0.5rem;
        //       }
        //     }
        //     span {
        //       color: #fff;
        //       padding: 0 0.3rem;
        //       padding-top: 0.2rem;
        //       display: flex;
        //     }
        &.sub {
          display: flex;
          justify-content: center;
          margin: 2rem 0 0;
          align-items: center;
          > a {
            display: inline-block;
            width: 100%;
            height: 0.85rem;
            line-height: 0.85rem;
            font-size: 0.32rem;
            letter-spacing: 0.05rem;
            text-align: center;
            border-radius: 0.1rem;
            color: #fff;
            /*background: #30323e;*/
            background: linear-gradient(to right, #43434e, #727181);
          }
        }
      }
    }
  }
}
</style>